<template>
    <el-tabs :tab-position="tabPosition" type="border-card" class="chat-tab-panel">
        <el-tab-pane v-for="chatGroupData in chatGroupDatas" :key="chatGroupData.id" >
            <template v-slot:label>
                <el-badge :value="getUnreadcount(chatGroupData.unProcessedCount)" maxValue="99"
                    type="danger" max=9 class="item"
                    :hidden="!showUnreadcount(chatGroupData.unProcessedCount)">
                    <div style=" white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 80px;padding-right:20px">
                        <span>{{chatGroupData.title}}</span>
                    </div>
                </el-badge>
            </template>
            <chat-tab-pane :contentList="chatGroupData.contentList"
                @task-processed="taskProcessed"
             :ref="chatGroupData.id"></chat-tab-pane>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import  ChatTabPane from '@/views/chat/ChatTabPane.vue'

    import {useStompClient} from '@/hooks'
    import axios from 'axios'
    import {ipcEmit} from '@/biz-electron'
    import { urlConfig } from '@/config'


    export default {
        name: 'ChatMainPanel',
        components: {
            ChatTabPane
        },
        data() {
            return {
                tabPosition: 'bottom',
                chatGroupDataMap:{},
                chatGroupDatas:[],
                chartServerStatus:0,
                chartServerRetryLoad:null
            };
        },
        mounted() {
            let me = this;
            useStompClient(me.chatHandler,me.connectdHandler,me.disConnectedHandler);
            me.initChatData();
        },
        methods: {
            connectdHandler(){
                if(this.chartServerStatus == 0){
                    if(this.chartServerRetryLoad){
                        this.chartServerRetryLoad.close();
                        this.chartServerRetryLoad = null;
                    }
                    this.chartServerStatus = 1
                    ipcEmit('chat-server-connected')
                }
            },
            disConnectedHandler(){
                if(this.chartServerStatus == 1){
                    this.chartServerRetryLoad = this.$loading({
                        lock: true,
                        text: '服务器已经断开，正在重连中，请稍后...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.chartServerStatus = 0
                    ipcEmit('chat-server-disconnected')
                }
            },
            initChatData(){
                let me = this;
                axios.get(urlConfig.URL_BASE+'/monitor/getMonitorResult')
                .then((res) => {
                    me.loadChatGroupData(res.data.data);
                }).catch((error) => {
                    console.log(error);
                })
            },
            chatHandler(msg){
                let msgJson = JSON.parse(msg.body);
                this.addChatGroupData(msgJson)
                ipcEmit('recive-new-msg',msgJson)
            },
            addOrUpdateGroup(monitorResult){
                let me = this;
                let chatGroupDataInfo = me.chatGroupDataMap[monitorResult.monitorGroup.id];
                let add = false;
                if(!chatGroupDataInfo){
                    chatGroupDataInfo = {};
                    chatGroupDataInfo.title = monitorResult.monitorGroup.name;
                    chatGroupDataInfo.id = monitorResult.monitorGroup.id;
                    add = true;
                }
                let contentList = chatGroupDataInfo.contentList;
                if(!contentList){
                    contentList = [];
                }
                if(!chatGroupDataInfo.unProcessedCount){
                    chatGroupDataInfo.unProcessedCount = 0;
                }
                contentList.unshift(monitorResult);
                chatGroupDataInfo.unProcessedCount = chatGroupDataInfo.unProcessedCount+1;
                chatGroupDataInfo.contentList = contentList;
                me.chatGroupDataMap[monitorResult.monitorGroup.id] = chatGroupDataInfo;
                if(add){
                    me.chatGroupDatas.push(chatGroupDataInfo);
                }
                return add;
            },
            loadChatGroupData(chatGroupDatas){
                let me = this;
                me.chatGroupDataMap = {};
                me.chatGroupDatas = [];
                chatGroupDatas.forEach((chatGroupData)=>{
                    me.addOrUpdateGroup(chatGroupData);
                });
            },
            addChatGroupData(chatGroupData){
                if(!this.addOrUpdateGroup(chatGroupData)){
                    this.$refs[chatGroupData.monitorGroup.id].addMessages(chatGroupData);
                }
            },
            getUnreadcount(unProcessedCount){
                if(unProcessedCount>99){
                    return "99+"
                }
                return unProcessedCount;
            },
            showUnreadcount(unProcessedCount){
                return unProcessedCount>0;
            },
            taskProcessed(contentObj){
                let currentGroupData = this.chatGroupDataMap[contentObj.monitorGroup.id];
                let currentContentList = currentGroupData.contentList;
                currentContentList = currentContentList.filter((contentItem) => {
                    return contentItem.name != contentObj.name;
                })
                currentGroupData.unProcessedCount = currentContentList.length;
                currentGroupData.contentList = currentContentList
                this.chatGroupDataMap[contentObj.monitorGroup.id] = currentGroupData;
            }
        }
    };
</script>

<style>
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: #e8f3fe;
        margin: 10px;
        color: #7dbcfc;
    }

    .infinite-list {
        display: contents;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .el-tabs--border-card>.el-tabs__content{
        padding: 0px;
    }

    .el-tabs__content {
        height: 100%;
        overflow-y: auto;
    }
    .el-badge__content.is-fixed{
        top: 10px;
        right: 15px;
    }
    .chat-tab-panel{
        height: calc(100% - 111px);
    }
</style>
